<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="d3.v4.min.js"></script>
		<style type="text/css">
			body {
				font-family: Arial;
			}
		</style>
	</head>
	<body>
		<div id="svgcontainer">
			
		</div>
	</body>
	<script type="text/javascript">
		var data = [1,2,3,4,5,6]
		var width = 3000;
		var height = 3000;
		var x = 20,y = 20;
		var left = 20;
		//Create SVG element
		var svg = d3.select("#svgcontainer")
			.append("svg")
			.attr("width", width)
			.attr("height", height);
		//Create and append rectangle elements
		svg.selectAll("rect")
		.data([1,2,3,4,5,6])
		.enter()
		.append("rect")
		.attr("x",function(d){
			console.log(x)
			return d*220;
		})
		.attr("y",20)
		.attr("width",200)
		.attr("height",100)
		.attr("fill","#ccc")
	</script>
</html>
